import { articleApi, ArticleCard, ArticleCardLoader } from '@/entities/article';
import { getUserId } from '@/entities/auth/model/selectors';
import { CourseCard, CourseCardLoader, productApi } from '@/entities/course';
import { ArticleDto, ListCourseDto } from '@/shared/interfaces/generated';
import { transformArrayIntoObject } from '@/shared/lib';
import { useAppSelector } from '@/shared/store';
import { Grid, TabsWithoutModal as Tabs } from '@/shared/ui';

import cs from './Favourites.module.scss';
import { NotFound } from './NotFound';

const FavouriteArticles = ({ articles, isLoading }: { isLoading?: boolean; articles?: ArticleDto[] }) => {
  if (!isLoading && articles?.length === 0) return <NotFound variant="article" />;
  if (isLoading)
    return (
      <Grid size="sm">
        {transformArrayIntoObject(Array(10).fill(1)).map(({ id }) => (
          <ArticleCardLoader key={id} />
        ))}
      </Grid>
    );
  return (
    <Grid size="sm">
      {articles?.map(({ id, image, title, publishedAt }) => (
        <ArticleCard date={publishedAt} id={id} image={image} key={id} title={title} />
      ))}
    </Grid>
  );
};

const FavouriteCourses = ({ courses, isLoading }: { courses?: ListCourseDto; isLoading?: boolean }) => {
  if (!isLoading && courses?.courses.length === 0) return <NotFound variant="course" />;
  if (isLoading)
    return (
      <Grid size="l">
        {transformArrayIntoObject(Array(3).fill(1)).map(({ id }) => (
          <CourseCardLoader key={id} />
        ))}
      </Grid>
    );
  return (
    <Grid size="l">
      {courses?.courses.map(({ id, product }) => (
        <CourseCard
          discount={product?.discount}
          discountPrice={product?.discountPrice}
          id={id}
          image={product?.image}
          isAdvertising={product?.superOrder > 0}
          key={id}
          price={product?.price}
          rate={product?.averageRate as unknown as number}
          title={product?.title}
        />
      ))}
    </Grid>
  );
};

export const Favourites = () => {
  const { data: courses, isLoading: isCoursesLoading } = productApi.useGetProductsQuery({ 'filters[favorite]': true });
  const userId = useAppSelector(getUserId);
  const { data: articles, isLoading: isArticlesLoading } = articleApi.useGetFavoriteArticlesQuery(
    { id: userId?.toString() || 0 },
    { skip: !userId },
  );

  return (
    <Tabs
      className={cs.tabs}
      headerClassName={cs.tabs_header}
      key={isCoursesLoading.toString()}
      tabs={[
        {
          id: 1,
          title: <>Учимся {courses?.courses.length ? courses.courses.length : <>0</>}</>,
          data: <FavouriteCourses courses={courses} isLoading={isCoursesLoading} />,
        },
        {
          id: 2,
          title: <>Статьи {articles?.articles?.length ? articles?.articles?.length : <>0</>}</>,
          data: <FavouriteArticles articles={articles?.articles?.map((v) => v)} isLoading={isArticlesLoading} />,
        },
      ]}
    />
  );
};
